<!--
 * @Descripttion: 
 * @Author: Wang Dejiang(aei)
 * @Date: 2022-07-31 19:33:36
 * @LastEditors: Wang Dejiang(aei)
 * @LastEditTime: 2022-07-31 20:10:30
-->
<template>
<div class="header">
    <div class="left">
        <el-button icon="el-icon-back" class="back" size="mini" @click="back"></el-button>
        <span style="font-size: 15px;margin-left: 15px;line-height: 50px;">成绩云</span>
    </div>
    <div class="right" style="font-size: 10px;">
        <img src="@/assets/userInfoImg.jpg" alt="" class="userInfoImg" @click="Identify">
        858577用户</div>
    <el-dialog title="提示" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
        <div class="indentify">
            <hua-kuai @verify='verify' @refresh='refresh' class=""></hua-kuai>
        </div>
        <!-- <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
        </span> -->
    </el-dialog>
    <el-dialog title="提示" :visible.sync="dialogVisible2" width="30%" :before-close="handleClose">
        <el-form ref="form" :model="form" label-width="80px">
            <el-form-item label="您的姓名">
                <el-input v-model="form.name"></el-input>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible2 = false">取 消</el-button>
            <el-button type="primary" @click="onSubmit">确 定</el-button>
        </span>
    </el-dialog>
</div>
</template>

<script>
let flag = 1
export default {
    data() {
        return {
            dialogVisible: false,
            result: false,
            dialogVisible2: false,
            form: {
                name: ''
            }
        };
    },
    methods: {
        // 通过路由跳转实现回退
        back() {
            this.$router.push('/')
        },
        handleClose(done) {
            this.$confirm('确认关闭？')
                .then(_ => {
                    done();
                })
                .catch(_ => {});
        },
        verify(result) {
            if (flag == 1) {
                this.dialogVisible = false
                this.dialogVisible2 = true
                this.result = result
                // 用来做标记
                flag = 2
            }
        },
        refresh() {
            console.log('用户点击了初始化')
        },
        Identify() {
            if (this.result == false) {
                this.dialogVisible = true
            }
            if (this.result === true) {
                this.dialogVisible2 = false
            }
        },
        onSubmit() {
            this.dialogVisible2 = false
        }
    }
}
</script>

<style scoped>
.header {
    height: 50px;
    border-bottom: 1px solid #e9e9e9;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    background-color: #3F7EFE;
    color: #fff;
}

.userInfoImg {
    height: 16px;
    width: 16px;
    border-radius: 10px;
    position: relative;
    top: 3px;
    margin-right: 7px;
}

.userInfoImg:hover {
    cursor: pointer;
}

.indentify {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
</style>
